<template>
  <div class="mine_wrapper">
    <!-- 吸顶导航 -->
    <transition appear>
      <div
        class="top_nav"
        v-if="isShowNav"
      >
        <div class="logo">
          <img
            :src="userInfo.header_img"
            alt=""
          />
        </div>
        <div class="nav_text">{{ userInfo.name || "OMINI.BASS" }}</div>
        <router-link
          class="set"
          to="/setting"
        ><img
            class="set"
            src="../assets/images/设置.png"
            alt=""
          /></router-link>
      </div>
    </transition>
    <!-- 上方主体 -->
    <div class="main">
      <!-- 头部 -->
      <nut-row
        class="header"
        type="flex"
        justify="space-between"
      >
        <nut-col :span="6">
          <div class="flex-content header_img">
            <img
              :src="userInfo.header_img"
              alt=""
            />
          </div>
        </nut-col>
        <nut-col :span="14">
          <div class="flex-content flex-content-light header_text">
            <div class="header_name">
              {{ userInfo.name || "OMINI.BASS" }}
            </div>
            <div class="header_intro">个人介绍</div>
          </div>
        </nut-col>
        <nut-col :span="4">
          <router-link
            to="/setting"
            class="flex-content header_set"
          >
            <img
              src="../assets/images/设置.png"
              alt=""
            />
          </router-link>
        </nut-col>
      </nut-row>
      <!-- 导航区域 -->
      <div class="nav">
        <!-- 我的订单 -->
        <div class="navtop">
          <div class="navtop_hd">我的订单</div>
          <div class="navtop_bd">
            <router-link
              to="/order/all/1"
              class="nav_item"
            >
              <img
                src="../assets/images/待付款.png"
                alt=""
              />
              待付款
            </router-link>
            <router-link
              to="/order/all/3"
              class="nav_item"
            >
              <img
                src="../assets/images/待收货.png"
                alt=""
              />
              待收货
            </router-link>
            <router-link
              to="/order/all/1"
              class="nav_item"
            >
              <img
                src="../assets/images/全部.png"
                alt=""
              />
              全部
            </router-link>
          </div>
        </div>
        <!-- 常用工具 -->
        <div class="navbottom">
          <div class="navtop_hd">常用工具</div>
          <div class="navtop_bd">
            <router-link
              to="/getgoodsaddress"
              class="nav_item"
            >
              <img
                src="../assets/images/收货地址.png"
                alt=""
              />
              收货地址
            </router-link>
            <router-link
              to="/"
              class="nav_item"
            >
              <img
                src="../assets/images/店铺直播.png"
                alt=""
              />
              店铺直播
            </router-link>
            <router-link
              to="/CouponCenter"
              class="nav_item last_img"
            >
              <img
                src="../assets/images/领券中心.png"
                alt=""
              />
              领券中心
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 为你推荐 -->
    <div class="recom">
      <nut-divider>为你推荐</nut-divider>
      <!-- 渲染商品列表 -->
      <div class="render_box">
        <router-link
          to="/GoodsDetails"
          class="recommends"
          v-for="item in goodsList"
          :key="item.id"
        >
          <img
            :src="item.s_goods_photos[0].path"
            alt=""
          />
          <div>
            <h3>{{ item.name }}</h3>
            <span>满300减30</span>
            <span>店铺领券</span>
            <p>￥{{ item.price }}</p>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">没有更多了哦~</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "homeMineView",
  data () {
    return {
      isShowNav: false,
    };
  },
  methods: {
    showNav () {
      if (window.pageYOffset >= 120) {
        this.isShowNav = true;
      } else {
        this.isShowNav = false;
      }
    },
  },
  computed: {
    // 从 vuex 中获取商品列表、用户信息
    ...mapState(["goodsList", "userInfo"]),
  },
  mounted () {
    window.addEventListener("scroll", this.showNav);
    // 请求商品列表
    this.$store.dispatch("getGoodsListData");
    // 请求用户信息
    this.$store.dispatch("getUserInfo");
  },
  beforeUnmount () {
    window.removeEventListener("scroll", this.showNav);
  },
};
</script>

<style lang="scss" scoped>
.v-enter-from,
.v-leave-to {
  transform: translateY(-17.6vw);
}
.v-enter-to,
.v-leave-from {
  transform: translateY(0);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s;
}
// 吸顶导航
.top_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 17.6vw;
  padding-top: 5.333vw;
  padding: 5.333vw 4.267vw 0 4.267vw;
  box-sizing: border-box;
  background-color: #c1ab96;
  z-index: 999;

  img {
    width: 100%;
    height: 100%;
  }
  .logo {
    width: 8vw;
    height: 8vw;
    overflow: hidden;
    border-radius: 50%;
  }
  .set {
    width: 6.933vw;
    height: 6.933vw;
  }
  .nav_text {
    width: 68.267vw;
    font-size: 5.333vw;
    color: #fff;
  }
}
a {
  display: block;
  text-decoration: none;
  color: #000;
}
.mine_wrapper {
  position: relative;
  background-color: #fff;
  padding-bottom: 48vw;
  .main {
    background-color: #c1ab96;
  }
}
.header {
  padding-top: 8vw;
  height: 26.667vw;
  box-sizing: border-box;

  .header_img {
    border-radius: 50%;
    overflow: hidden;
    width: 16vw;
    height: 16vw;
    margin: 0 auto;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .header_text {
    padding-top: 1.067vw;
    color: #fff;
    .header_name {
      font-size: 5.867vw;
      font-weight: 700;
    }
  }
  .header_set {
    width: 7.467vw;
    height: 7.467vw;
    margin-top: 4.267vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.nav {
  height: 63.467vw;
  padding: 2.667vw 2.667vw 0;
  border-radius: 3.2vw 3.2vw 0 0;
  background-color: #fff;
  .navtop,
  .navbottom {
    .navtop_hd {
      padding-left: 1.333vw;
      font-weight: 700;
      font-size: 4.267vw;
    }
    .navtop_bd {
      display: flex;
      justify-content: space-between;
      margin-top: 4.267vw;

      .nav_item {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 26.667vw;
        color: #000;
        font-size: 3.733vw;
        img {
          width: 8vw;
          height: 8vw;
          margin-bottom: 1.867vw;
        }
      }
      .last_img {
        img {
          width: 9.6vw;
        }
      }
    }
  }
  .navbottom {
    margin-top: 5.333vw;
  }
}
.recom {
  background-color: #fff;
  padding: 3.2vw;

  .nut-divider {
    height: 12.267vw;
    margin: 0;
    background-color: #fff;
    color: #666;
    font-size: 4.267vw;
    font-weight: 700;
    margin-bottom: 3.733vw;
  }
  ::v-deep(.nut-divider.nut-divider-hairline:before),
  ::v-deep .nut-divider.nut-divider-hairline:after {
    transform: scaleY(0.1);
  }

  .render_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .recommends {
    background-color: #f2f2f2;
    width: 44vw;
    height: 69.333vw;
    border-radius: 1.333vw;
    margin-bottom: 3.467vw;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 2.667vw 5.333vw,
      rgba(0, 0, 0, 0.23) 0px 1.6vw 1.6vw;
    img {
      width: 44vw;
      height: 44vw;
      border-radius: 2.667vw;
      background-color: darkorchid;
    }
    div {
      box-sizing: border-box;
      margin: 0.8vw 3.2vw 0 3.2vw;
      h3 {
        overflow: hidden;
        line-height: 1.3;
        font-size: 3.733vw;
        height: 9.6vw;
        margin-bottom: 1.067vw;
      }
      span {
        display: inline-block;
        font-size: 2.667vw;
        border-radius: 1vw;
        margin-bottom: 0.8vw;
        color: #8e7e6f;
        border: #8e7e6f 0.4vw solid;
        &:nth-of-type(1) {
          border-right: 0;
        }
        &:nth-of-type(2) {
          border-left: #8e7e6f 0.4vw dashed;
        }
      }
      p {
        font-size: 14px;
        &:last-of-type {
          font-weight: bolder;
        }
      }
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 34.133vw;
  color: #8e7e6f;
  font-weight: 700;
  font-size: 3.733vw;
  background-color: #c1ab96;
}
</style>